<template>
  <div class="hello-world">
    <!-- Vue 图标 -->
    <img src="./assets/logo.png" alt="Vue Logo" class="vue-logo" />

    <!-- 输入框 -->
    <div class="input-container">
      <input
        v-model="inputContent"
        type="text"
        placeholder=""
        class="input-box"
      />
    </div>

    <!-- 同步显示内容 -->
    <div class="display-content">
      <p>{{ inputContent }}</p>
    </div>

    <!-- 清空按钮 -->
    <button @click="clearContent" class="clear-button">清空</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      inputContent: "" // 用于双向绑定输入框内容
    };
  },
  methods: {
    clearContent() {
      this.inputContent = ""; // 清空输入框内容
    }
  }
};
</script>

<style scoped>
.hello-world {
  text-align: center;
  margin: 20px;
}

.vue-logo {
  width: 100px;
  height: auto;
  margin-bottom: 20px;
}

.input-container {
  margin-bottom: 20px;
}

.input-box {
  padding: 10px;
  font-size: 16px;
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

.display-content {
  margin-bottom: 20px;
}

.clear-button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
}

.clear-button:hover {
  background-color: #3498db;
}
</style>